<template>
  <div class="recharge-proof">
    <div class="item-box recharge-num">
      <!-- <p class="item-title">上传凭证</p> -->
      <SmallUploadImg ref="smallUploadImgPz" :maxLength="1" :isUploadCzPz="true" sfzBg="https://img.wifenxiao.com/h5-wfx/images/scpz.png"></SmallUploadImg>
    </div>
    <!-- <div class="item-box">
      <div
        class="clearfix recharge-search">
        <van-uploader accept="image/*" :after-read="afterRead">
          <img width="100%" :src="proof_path || upImg" alt />
        </van-uploader>
      </div>
    </div> -->
    <div class="btn-box">
      <div class="red-gra-btn submit-btn" @click="balanceRechargeFn">上传凭证</div>
    </div>
	</div>
</template>

<script>
import Vue from 'vue'
import Store from '@/utils/store'
import { uploadImgs } from '@/api/community/article'

import { openPage } from '@/utils/utils'
import small from '@/smallapp/small'
import SmallUploadImg from '@/components/SmallUploadImg'
import { balanceRecharge } from '@/api/user/member/memberApi'
export default Vue.extend({
  components: {
    SmallUploadImg
  },
  data() {
    return {
      upImg:'https://img.wifenxiao.com/h5-wfx/images/user/pzImg.png',
      proof_path: '',
      submitData: {}
    }
  },
  methods: {
    init() {
      const data = Store.fetch('rechargeData')
      this.submitData = Object.assign({}, data)
    },
    /**
     * 上传图片
     */
    // afterRead(file) {
    //   const form = new FormData()
    //   form.append('file', file.file)
    //   this.$loadingWrap.show()
    //   setTimeout(() => {
    //     this.$loadingWrap.close()
    //   }, 50000)
    //   uploadImgs(form).then(res => {
    //     this.$loadingWrap.close()
    //     if (res.status === 1) {
    //       this.proof_path = res.data.pic_url
    //       this.submitData.proof_path = res.data.pic_url
    //     } else {
    //       this.$Error('上传失败, 请重新上传')
    //     }
    //   }).catch(() => {
    //     this.$Error('上传失败, 请重新上传')
    //   })
    // },
    /**
     * 立即充值方法
     */
    balanceRechargeFn() {
       if (this.$refs.smallUploadImgPz && this.$refs.smallUploadImgPz.imgList.length) { // 将凭证信息保存处理，只取第一张
        this.proof_path = this.$refs.smallUploadImgPz.imgList[0]
        this.submitData.proof_path = this.$refs.smallUploadImgPz.imgList[0]
      }
      if (!this.submitData.proof_path) {
        this.$Error(`请先上传凭证`)
        return false
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      balanceRecharge(this.submitData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          //  小程序线下支付的跳转
          openPage(res.data)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
.recharge-proof{
  .item-box {
    background: #fff;
    margin: 20px 20px 0 20px;
    border-radius: 20px;
    padding: 30px;
  }
  .van-uploader{
    width:100%;
  }
  .btn-box {
    width: 500px;
    margin:60px auto;
    padding: 10px 20px;
    text-align: center;
    .submit-btn {
      height: 80px;
      width: 100%;
      line-height: 80px;
      color: #fff;
      font-size: 32px;
      border-radius: 50px;
    }
  }
}
</style>
